<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link href="./css/index.css" rel="stylesheet">
  <style>
    h1 {
      color: #000;
    }

    svg {
      min-width: 600px;
      min-height: 600px;
      overflow: auto;
    }
  </style>
</head>
<body>
<h1>SVG Filter</h1>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <filter id="feBlend1">
    <feFlood result="floodFill" x="0" y="0" width="100%" height="100%" flood-color="green" flood-opacity="0.8"/>
    <feBlend in="SourceGraphic" in2="floodFill" mode="normal"/>
  </filter>
  <filter id="feBlend2">
    <feFlood result="floodFill" x="0" y="0" width="100%" height="100%" flood-color="green" flood-opacity="0.8"/>
    <feBlend in="floodFill" in2="SourceGraphic" mode="normal"/>
  </filter>
  <circle cx="50" cy="50" r="40" fill="red" filter="url(#feBlend1)"/>
  <circle cx="150" cy="50" r="40" fill="red" filter="url(#feBlend2)"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <filter id="raw">
    <feColorMatrix
      type="matrix"
      values="1 0 0 0 0
              0 1 0 0 0
              0 0 1 0 0
              0 0 0 1 0 "/>
  </filter>
  <filter id="red">
    <feColorMatrix
      type="matrix"
      values="1 0 0 0 0
              0 0 0 0 0
              0 0 0 0 0
              0 0 0 1 0 "/>
  </filter>
  <filter id="green">
    <feColorMatrix
      type="matrix"
      values="0 0 0 0 0
              0 1 0 0 0
              0 0 0 0 0
              0 0 0 1 0 "/>
  </filter>
  <filter id="blue">
    <feColorMatrix
      type="matrix"
      values="0 0 0 0 0
              0 0 0 0 0
              0 0 1 0 0
              0 0 0 1 0 "/>
  </filter>
  <circle cx="150" cy="150" r="100" filter="url(#raw)"/>
  <circle cx="250" cy="150" r="100" filter="url(#red)"/>
  <circle cx="150" cy="250" r="100" filter="url(#green)"/>
  <circle cx="250" cy="250" r="100" filter="url(#blue)"/>
</svg>
<!--<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>-->
<script src="./js/d3.v4.min.js"></script>
<script src="./js/svg.js"></script>
</body>
</html>